<template>
	<div class="content_wrapper">

		<el-container>
			<el-aside width="300px">
				<div class="detail-left">
					<div class="product-board" style="border: 1px solid #CCCCCC;margin-top: 20px;">
						<img src="../assets/images/1.png">
						<!--<ul>
					<router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active">
						{{ item.name }}
					</router-link>
				</ul>-->
						<ul>
							<li v-for="item in products">
								{{ item.name }}
							</li>
						</ul>
					</div>
				</div>
			</el-aside>

			<el-container>
				<el-main>
					<div class="index-right">
						<router-view>
					    </router-view>
					</div>
				</el-main>
			</el-container>
		</el-container>

	</div>
</template>

<script type="text/javascript">
	import slideShow from '../components/slideShow'
	export default {
		name: 'content',
		components: {
			slideShow
		},
		data() {
			return {
				products: [{
						name: '数据统计',
						path: 'count',
						icon: require('../assets/images/1.png'),
						active: false
					},
					{
						name: '数据预测',
						path: 'forecast',
						active: false
					},
					{
						name: '流量分析',
						path: 'analysis',
						active: false
					},
					{
						name: '广告发布',
						path: 'publish',
						active: false
					}
				],
				imgMap: {
					'/detail/count': require("../assets/images/1.png"),
					'/detail/forecast': require("../assets/images/2.png"),
					'/detail/analysis': require("../assets/images/3.png"),
					'/detail/publish': require("../assets/images/4.png")
				},
				slides: [{
						src: require('../assets/slideShow/pic1.jpg'),
						title: 'React.js入门与实战',
						href: 'detail/analysis'
					},
					{
						src: require('../assets/slideShow/pic2.jpg'),
						title: '安卓开发工程师',
						href: 'detail/count'
					},
					{
						src: require('../assets/slideShow/pic3.jpg'),
						title: 'JavaScript算法',
						href: 'http://xxx.xxx.com'
					},
					{
						src: require('../assets/slideShow/pic4.jpg'),
						title: 'React Native 跨平台开发',
						href: 'detail/forecast'
					}
				]
			}
		},
		created: function() {}
	}
</script>

<style scoped="scoped">
	.content_wrapper {
		height: 600px;
		background: #ccccccb0!important;
	}
	
	.el-container {
		width: 1300px!important;
		margin: 0 auto!important;
	}
	
	.detail-left {
		float: left;
		width: 100%;
		text-align: center;
	}
	
	.detail-right {
		float: left;
		width: 980px;
		margin-left: 20px;
	}
	
	.product-board {
		background: #fff;
		padding: 20px 0;
	}
	
	.product-board ul {
		margin-top: 20px;
	}
	
	.product-board li {
		text-align: left;
		padding: 10px 15px;
		cursor: pointer;
	}
	
	.product-board li.active,
	.product-board li:hover {
		background: #4fc08d;
		color: #fff;
	}
	
	.product-board li a {
		display: block;
	}
</style>